<template>
  <PageWrapper title="AiEditor" content="AiEditor 是一个面向 AI 的下一代富文本编辑器，它基于 Web Component 开发，因此支持 Layui、Vue、React、Angular、Svelte 等几乎任何前端框架。她适配了 PC Web 端和手机端，并提供了 亮色 和 暗色 两个主题。除此之外，她还提供了灵活的配置，开发者可以方便的使用其开发任何文字编辑的应用。" contentClass="p-4">
    <div ref="divRef" style="height: 600px"/>
  </PageWrapper>
</template>

<script lang="ts">
import {AiEditor} from "aieditor";
import "aieditor/dist/style.css"
import PageWrapper from "@/components/Page/src/PageWrapper.vue";
export default {
  components: {PageWrapper},
  mounted(){
    new AiEditor({
      element: this.$refs.divRef as Element,
      placeholder: "点击输入内容...",
      theme: "light",
      content: 'AiEditor 是一个面向 AI 的开源富文本编辑器。 ',
      contentIsMarkdown: false,
      contentRetention: true,
      contentRetentionKey: 'ai-editor-content',
      draggable: true,
      pasteAsText: false,
      ai: {
        models: {
          openai: {
            endpoint: "https://api.moonshot.cn",//月之暗面-kimi
            model: "moonshot-v1-8k",
            apiKey: "sk-*****fW"
          }
        }
      }
      //更多配置见https://aieditor.com.cn/zh/ai/base.html https://aieditor.com.cn/zh/ai/llm.html
    })
  }
}
</script>
